<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改页面</title>
    <script src="../client-lib/jquery-3.7.1.js"></script>
</head>

<style>
    *
    {
      margin:0;
      padding:0;
    }
    .box
    {
      width:100%;
      height:100vh;
      background-image: url('../img/update_bg.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .clientloginBox
    {
      background-color:rgba(255, 255, 255, 0.6);
      width:250px;
      height:350px;
      padding:25px 15px;
      position: absolute;
      right:100px;
<!--      top: calc(50% - 170px);-->
      /* x轴偏移量 y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 */
      box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.6);
      top:50%;
      left:50%;
      transform:translate(-50%,-50%)
    }

    .adminloginBox
    {
      background-color:rgba(255, 255, 255, 0.6);
      width:250px;
      height:300px;
      padding:25px 15px;
      position: absolute;
      right:100px;
<!--      top: calc(50% - 170px);-->
      /* x轴偏移量 y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 */
      box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.6);
      top:50%;
      left:50%;
      transform:translate(-50%,-50%)
    }

    .textBox
    {
      margin-bottom:20px;
    }

    .textBox :nth-child(1)
    {
      color:red;
      font-size: 20px;
    }

    .textBox :nth-child(2)
    {
      color:#b1b1b1;
      font-size: 12px;
    }

    .inpBox
    {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      background: white;
      border-radius: 25px;
      padding:5px;
      margin-bottom: 15px;
    }

    .inpBox:hover
    {
        box-shadow:#288cff 0px 0px 10px
    
    }

    .inpBox img
    {
      margin-right:10px;
    }

    .inpBox input
    {
      border: none;
      outline: none;
    }

    .textBox2
    {
      display: flex;
<!--      justify-content: space-between;-->
      align-items: center;
      color:#FF5300;
      height:20px;
    }

    .textBox2 span
    {
      border-bottom: 1px solid #FF5300;
      cursor: pointer;
    }

    .btnBox
    {
      padding:10px;
      font-size: 14px;
      background: red;
      color:white;
      text-align: center;
      border-radius: 25px;
      margin-top:20px;
      cursor: pointer;
      border:0;
    }

    .btnBox2
    {
      width:50px;
      text-align: center;
      margin: 10px auto;
      color:#4e4e4e;
      font-size: 12px;
      cursor: pointer;
      border-bottom: 1px solid #4e4e4e;
    }

    .textBox3
    {
      font-size: 20px;
      color:white;
      position:absolute;
      bottom: 50px;
      left:50px;
    }

    #adminLogin
    {
      color:red;
      float:right;
    }

    #adminLogin:hover
    {
      color:black;
      cursor: pointer;
      text-decoration: underline;
    }

    #clientLogin
    {
      color:red;
      float:right;
    }

    #clientLogin:hover
    {
      color:black;
      cursor: pointer;
      text-decoration: underline;
    }

    .none
    {
      display: none;
    }

    #back_list
    {
      position: absolute;
      left: 100px;
      top: 20px;
      color: black;
      text-decoration: none;
      font-size: 25px;
    }

    #back_list:hover
    {
      color: white;
    }

  </style>

<body>
    <div class="box">
        <a href="list.html" id="back_list">回到首页</a>
        <div class="clientloginBox" id="client">
          <div class="textBox">
            <h5 style="text-align: center;" id="title">Update</h5>
          </div>
          <form method="post" action="./commodity/update" enctype="multipart/form-data" id="update_form">
            <div class="inpBox">            
              <input id="name" type="text" placeholder="商品名" name="name">
            </div>
            <div class="inpBox">
              <input id="origin" type="text" placeholder="产地" name="origin">
            </div>
            <div class="inpBox">
                <input id="price" type="text" placeholder="价格" name="price">
            </div>
            <div class="inpBox">
                <input id="category" type="text" placeholder="种类" name="category">
            </div>
            <div class="inpBox">
                <input id="productionDate" type="text" placeholder="生产日期" name="productionDate">
            </div>
            <div class="inpBox">    
                <input type="file" name="image">
            </div>
            <div style="text-align:center"><input type="submit" value="更新商品" class="btnBox" style="width:250px"></div>
          </form>
        </div>
    </div>
</body>

<script>
  $(document).ready(function(){
    var url = location.search;
    if(url.indexOf("?") != -1)
    {
      var str = url.substring(1);
      strs = str.split("=");
    }
    console.log(strs[1]);
    var form = $("#update_form");
    var div = $("<div class='inpBox' style='display:none;'></div>");
    div.append("<input type='hidden' placeholder='id' name='id' value=" + strs[1] + ">");
    form.append(div);

    var title = $("#title");
    title.append(" ID:" + strs[1]);
  });

  
</script>
</html>